<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>导航条</title>
		<style type="text/css">
			body{
				margin: 0;
				padding: 0;
			}
			.menu{
				/* 为了在窗口小的情况下，不变形 */
				display: flex;
				list-style: none;
				padding: 0;
				margin: 0;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				background-color: #34495e;
				border-radius: 5px;
				line-height: 50px;
				padding: 0px 10px;
			}
			.menu-item{
				width: 100px;
				display: inline-block;
				font-size: 15px;
				text-align: center;
				text-decoration: none;
				color: #FFFFFF;
				transition: .3s;
				position: relative;
			}
			.bg{
				position: absolute;
				height: 100%;
				width: 100px;
				z-index: -1;
				border-radius: 5px;
				left: 10px;
				top: 0;
				background-color: #1abc9c;
				transition: .3s;
			}
			.menu-item:hover{
				font-weight: bold;
				transform: scale(1.3);
			}
			
			.menu-item:nth-child(2):hover~.bg{
				left: 110px;
			}
			.menu-item:nth-child(3):hover~.bg{
				left: 210px;
			}
			.menu-item:nth-child(4):hover~.bg{
				left: 310px;
			}
			
			
		</style>
	</head>
	<body>
		<div class="menu">
			<a href="#" class="menu-item">首页1</a>
			<a href="#" class="menu-item">首页2</a>
			<a href="#" class="menu-item">首页3</a>
			<a href="#" class="menu-item">首页4</a>
			<a href="#" class="bg"></a>
		</div>
	</body>
</html>
